<template>
	<view class="page">
		<view class="block_1">
			<view class="group_2">
				<!-- <image style="width: 710rpx;height: 340rpx;" :src="splist.banner" mode=""></image> -->
				<u-swiper :list="banner" height='340rpx'></u-swiper>
			</view>
			<view class="group_3">
				<view class="group_4">
					<view class="text-wrapper_1">
						<text lines="1" class="text_3">{{splist.venue_name}}</text>
					</view>
					<view class="text-wrapper_1" style="margin-top: 10rpx;">
						<text lines="1" style="font-size: 26rpx;">{{splist.open_time ? splist.open_time : ''}}</text>
					</view>
					<view class=""
						style="display: flex; flex-direction: row;justify-content: center;  justify-content: space-between;margin-top: 15rpx;align-items: center; ">
						<view class="" style="display: flex; flex-direction: row;" @click="addresslist">
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/ce/94680b3a6b8cd898f7b45009fba68f.png?attname=94680b3a6b8cd898f7b45009fba68f.png"
								class="label_4"></image>
							<text lines="1" class="text-group_1">{{splist.address ? splist.address : ''}}</text>
						</view>
						<view class="" style="display: flex; flex-direction: row;" @tap="call">
							<image style="width: 30rpx;height: 30rpx;margin-right: 15rpx;"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/e4/72e562587fb45b2796ffadef1311ac.png?attname=po45.png"
								mode=""></image>
							<view class="text-wrapper_text" style="font-size: 26rpx;">
								电话
							</view>
						</view>
					</view>
					<text lines="1" class="text_8" style="margin-top: 10rpx;">场地简介</text>
					<view class="block_5">
						<view class="text-group_2">
							<scroll-view scroll-y lines="1" class="text_9">
								<u-parse :content="splist.venue_intro"></u-parse>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="group_5">
					<view class="image-text_2">
						<view class="group_66"></view>
						<text lines="1" class="text-group_36">商品列表</text>
					</view>
				</view>

				<view class="group_67" v-for="(item,index) in splist.foods" :key="index">
					<view class="block_3">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="block_132">
						<text lines="1" class="text_11">{{item.name}}</text>
						<view class="text-wrapper_4">
							<text lines="1" class="text_12">¥{{item.price_selling}}</text>
							<!-- <text lines="1" class="text_13">周一至周日8:00~22:00</text> -->
						</view>
						<!-- <view class="image-text_1">
							<image
								src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/227be38665aa428ab14d5e0890edca87_mergeImage.png"
								class="label_4"></image>
							<text lines="1" class="text-group_1">健身馆1F</text>
						</view> -->
						<view class="group_7">
							<!-- <view class="text-wrapper_5" v-for="(im,idx) in item.marks">
								<text lines="1" class="text_14">{{im}}</text>
							</view> -->
							<!-- <view class="text-wrapper_6">
								<text lines="1" class="text_15">淋浴间</text>
							</view> -->
							<!-- <view class="text-wrapper_7" @click="onsport">
								<text lines="1" class="text_16">预定</text>
							</view> -->
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	export default {
		data() {
			return {
				po52: this.$https.assetsPath + 'po52.png',
				po57: this.$https.assetsPath + 'po57.png',
				po45: this.$https.assetsPath + 'po45.png',
				foodid: '',
				splist: {},
				Foodslist: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				banner: []
			};
		},
		onLoad(options) {
			this.foodid = options.foodid
			this.getShopInfo()
		},
		methods: {
			// 导航地址
			addresslist() {
				// this.pan_img = true
				uni.openLocation({
					latitude: Number(this.splist.lat), //要去的纬度-地址
					longitude: Number(this.splist.lng), //要去的经度-地址
					address: this.splist.address, //要去的具体地址

					//此处踩坑的问题2：
					//latitude 和 longitude的值一定要是number类型。
					//所以传递的时候需要使用Number将其转换一下。
				})
			},
			// 拨打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: this.splist.phone,
					success: function() {},
					fail() {}
				})
			},
			// 获取分类商品
			async getShopInfo() {
				let data = {
					project_id: getApp().globalData.projectId,
					shop_id: this.foodid
				}
				let result = await subscribe.shopdetail(data)
				if (result.code == 1) {
					this.splist = result.data
					this.banner = result.data.banner.split('|')
					// this.getShopFoods()
				}
			},
			// 获取店铺商品
			async getShopFoods() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.Foodslist = [];
				let data = {
					venue_id: this.foodid,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				}
				let result = await subscribe.getShopFoods(data)
				if (result.code == 1) {
					// this.Foodslist = result.data.data
					that.Foodslist = that.Foodslist.concat(result.data.data); //将数据拼接在一起
					that.totalPage = result.data.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getShopFoods()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: rgba(237, 245, 245, 1.0);
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.block_1 {
		background-color: rgba(255, 255, 255, 1.0);
		height: 100%;
		display: flex;
		flex-direction: column;
	}


	.group_2 {
		width: 710rpx;
		height: 340rpx;
		align-self: center;
		display: flex;
		flex-direction: column;
	}

	.group_3 {
		display: flex;
		flex-direction: column;
		padding: 30rpx 20rpx 0 20rpx;
	}

	.group_4 {
		background-color: rgba(255, 255, 255, 1.0);
		border-radius: 12rpx;
		// height: 330rpx;
		display: flex;
		flex-direction: column;
	}

	.text-wrapper_1 {
		width: 710rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.text_3 {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 40rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 56rpx;
	}

	.text_4 {
		overflow-wrap: break-word;
		color: rgba(166, 166, 166, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin-top: 17rpx;
	}

	.block_4 {
		width: 710rpx;
		margin-top: 10rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.section_1 {
		display: flex;
		flex-direction: column;
	}

	.text-wrapper_2 {
		width: 400rpx;
		flex-direction: row;
		display: flex;
		justify-content: flex-start;
	}

	.text_5 {
		overflow-wrap: break-word;
		color: rgba(75, 166, 119, 1.0);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
	}

	.text_6 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin-left: 15rpx;
	}

	.image-text_1 {
		width: auto;
		flex-direction: row;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;
	}

	.label_4 {
		width: 24rpx;
		height: 24rpx;
	}

	.text-group_1 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin-left: 15rpx;
	}

	.text-group_12 {
		padding: 7rpx 17rpx;
		background: #E6E6E6;
		border-radius: 4rpx;
		opacity: 0.6;
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
		line-height: 22rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.text-wrapper_3 {
		// width: 120rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		.text-wrapper_text {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 22rpx;
			text-align: center;
			margin-top: 10rpx;

		}
	}


	.block_5 {
		background-color: #f4f9f9;
		border-radius: 4rpx;
		margin-top: 19rpx;
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 0 20rpx;
		height: 200rpx;
		width: 100%;
	}

	.text-group_2 {
		display: flex;
		flex-direction: column;
		height: 200rpx;
		width: 100%;
	}

	.text_8 {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
		margin-right: 558rpx;
	}

	.text_9 {
		width: 670rpx;
		height: 180rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: justify;
		line-height: 40rpx;
		margin-top: 9rpx;
	}

	.group_5 {
		background-color: rgba(255, 255, 255, 1.0);
		border-radius: 12rpx;
		// margin-top: 130rpx;
		display: flex;
		flex-direction: row;
		padding: 20rpx 0 0 0;
	}

	.image-text_2 {
		width: 128rpx;
		flex-direction: row;
		display: flex;
		justify-content: flex-start;
	}

	.group_66 {
		background-color: rgba(75, 166, 119, 1.0);
		border-radius: 12rpx;
		width: 6rpx;
		height: 24rpx;
		display: flex;
		flex-direction: column;
		margin: 8rpx 0 8rpx 0;
	}

	.text-group_36 {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 10rpx;
	}

	.group_67 {
		background-color: rgba(255, 255, 255, 1.0);
		border-radius: 12rpx;
		width: 710rpx;
		padding-bottom: 20rpx;
		flex-direction: row;
		display: flex;
		justify-content: flex-start;
		margin: 10rpx auto 0;
	}

	.block_3 {
		border-radius: 10rpx;
		// background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0ffd3594354408ab5f6ace6bccb713b_mergeImage.png);
		width: 280rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;

		image {
			width: 280rpx;
			height: 160rpx;
		}
	}

	.block_132 {
		display: flex;
		flex-direction: column;
		margin: 10rpx 0 10rpx 20rpx;

		.text_11 {
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 40rpx;
		}

		.text-wrapper_4 {
			width: 364rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 10rpx 46rpx 0 0;
		}

		.text_12 {
			overflow-wrap: break-word;
			color: rgba(75, 166, 119, 1.0);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.text_13 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.image-text_1 {
			width: 138rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 18rpx 0 0 0;
		}

		.label_4 {
			width: 24rpx;
			height: 24rpx;
		}

		.text-group_1 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
			margin-top: 2rpx;
		}

		.group_7 {
			margin-top: 16rpx;
			flex-direction: row;
			display: flex;
		}

		.text-wrapper_5 {
			background-color: rgba(230, 230, 230, 0.6);
			border-radius: 4rpx;
			margin-top: 14rpx;
			display: flex;
			flex-direction: column;
			padding: 7rpx 15rpx 7rpx 15rpx;
			margin-right: 10rpx;
		}

		.text_14 {
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: right;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.text-wrapper_6 {
			background-color: rgba(230, 230, 230, 0.6);
			border-radius: 4rpx;
			display: flex;
			flex-direction: column;
			margin: 14rpx 0 0 10rpx;
			padding: 7rpx 12rpx 7rpx 12rpx;
		}

		.text_15 {
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: right;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.text-wrapper_7 {
			margin-left: 80rpx;
			display: flex;
			flex-direction: column;
			padding: 13rpx 34rpx 13rpx 34rpx;
			background: linear-gradient(135deg, #6BD3A6 0%, #56BF89 100%), #56BF89;
			border-radius: 10rpx;
		}

		.text_16 {
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
		}
	}
</style>